import { CSSProperties, useState } from 'react'
import { View, Image } from '@tarojs/components'
import res from './res.json'
import { screenHeight, FlexCode, TabItem, rpx } from '@flex_code/core'
import { useSelector, useDispatch } from 'react-redux'

export type TabBarProps = {
  tabs: TabItem[]
  height?: number
}

const TabBar: React.FC<TabBarProps> = ({ tabs, height = 100 }) => {
  const [currentTab, setCurrentTab] = useState(0)
  const appStore = useSelector((state: any) => state.app)
  const dispatch = useDispatch()

  const bodyStyle: CSSProperties = {
    width: rpx(750),
    height: screenHeight,
    display: 'flex',
    flexDirection: 'column'
  }

  const bottomTabStyle: CSSProperties = {
    height: rpx(height)
  }

  const tabStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: '100%',
    width: '100%',
    backgroundColor: '#fff',
    borderTop: '1px solid #ddd'
  }

  const tabItemStyle: CSSProperties = {
    flex: 1,
    textAlign: 'center',
    padding: '10px 0',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '80%'
  }

  const contentStyle: CSSProperties = {
    flex: 1,
    width: rpx(750)
  }

  async function tabbarTest() {
    const sdk = new FlexCode({} as any)
    const json = await sdk.test(res.dataMap.data)
    console.log(json)
  }

  if (tabs.length < 0) {
    return <View>未配置页面</View>
  }

  if (tabs.length === 1) {
    return tabs[0].component
  }

  return (
    <View style={bodyStyle}>
      <View
        style={contentStyle}
        onClick={async () => {
          try {
            await tabbarTest()
            // await pageTest(tabs)
            // console.log('DependencyContainer', DependencyContainer.resolve('action'))
          } catch (error) {
            throw new Error(`【这是错误】- ${error}`)
          }
        }}
      >
        <View>{appStore.count}</View>
        {tabs[currentTab].component}
      </View>
      <View style={bottomTabStyle}>
        <View style={tabStyle}>
          {tabs.map((tab, index) => (
            <View
              key={index}
              style={{
                ...tabItemStyle,
                borderLeftColor: '#eee',
                borderLeftWidth: index == 0 ? 0 : rpx(2),
                borderLeft: index == 0 ? '' : '1px solid #eee',
                flexDirection: 'column',
                gap: rpx(10),
                alignItems: 'center',
                justifyContent: 'center'
              }}
              onClick={() => setCurrentTab(index)}
            >
              <Image
                src={tab.icon!}
                style={{
                  width: rpx(40),
                  height: rpx(60)
                }}
              />
              <View
                style={{
                  fontSize: rpx(14)
                }}
              >
                {tab.title}
              </View>
            </View>
          ))}
        </View>
      </View>
    </View>
  )
}

export default TabBar
